<template>
  <div class="app-container">
    <div>
      <!-- <el-input v-model="LogsViewModel.LogLevel" placeholder="等级" style="width: 200px;" class="filter-item"
        @keyup.enter.native="queryUser" /><el-option-group  @click.enter.native="queryUser">
                  <el-option  :key="调试" :label="调试" :value="Debug" />
                  <el-option  :key="输出" :label="输出" :value="Info" />
                  <el-option  :key="警告" :label="警告" :value="Warn" />
                  <el-option  :key="错误" :label="错误" :value="Error" />
                  <el-option  :key="严重错误" :label="严重错误" :value="Fatal" />
            </el-option-group>    | typeFilter-->
        <el-select v-model="LogsViewModel.LogLevel" @change="queryUser" size="small" class="filter-item" placeholder="请选择错误等级">
             <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
        </el-select>
      <el-input v-model="LogsViewModel.LoginName" size="small" placeholder="用户名" style="width: 200px;" class="filter-item"
        @keyup.enter.native="queryUser" />
      <el-input v-model="LogsViewModel.LogMessage" size="small" placeholder="错误信息" style="width: 200px;" class="filter-item"
        @keyup.enter.native="queryUser" />
      <el-date-picker v-model="LogsViewModel.StartTime" size="small" placeholder="开始时间" style="width: 200px;" class="filter-item"
       @keyup.enter.native="queryUser" type="datetime" value-format="yyyy-MM-dd HH:mm" />
      <el-date-picker v-model="LogsViewModel.EndTime" size="small" placeholder="结束时间" style="width: 200px;" class="filter-item"
       @keyup.enter.native="queryUser" type="datetime" value-format="yyyy-MM-dd HH:mm" />
      <el-button type="primary" @click="queryUser" size="small" icon="el-icon-search">查询日志</el-button>
      <el-button type="primary" @click="refreshUser" size="small" icon="el-icon-refresh">刷新</el-button>
    </div>
    <el-table
      v-loading="loading"
      :data="logsList"
      style="width: 100%;margin-top:30px;"
      border
      @sort-change="sortChange"
    >
      <el-table-column label="等级" width="120" sortable="custom" prop="LogLevel">
        <template slot-scope="scope">{{ scope.row.LogLevel }}</template>
      </el-table-column>
      <el-table-column label="用户名" width="180" sortable="custom" prop="AspnetUserIdentity">
        <template slot-scope="scope">{{ scope.row.AspnetUserIdentity }}</template>
      </el-table-column>
      <el-table-column label="访问IP" width="180" sortable="custom" prop="AspnetUserIdentity">
        <template slot-scope="scope">{{ scope.row.AspnetRequestIP }}</template>
      </el-table-column>
      <el-table-column label="访问设备" width="180" sortable="custom" prop="AspnetUserIdentity">
        <template slot-scope="scope">{{ scope.row.Machinename }}</template>
      </el-table-column>

      <el-table-column label="信息" sortable="custom" prop="Message">
        <template slot-scope="scope">{{ scope.row.Message }}</template>
      </el-table-column>
      <el-table-column label="错误时间" width="180" sortable="custom" prop="LogDate">
        <template slot-scope="scope">{{ scope.row.LogDate | formatDateSec}}</template>
      </el-table-column>
    </el-table>
    <!-- 分页组件：https://element.eleme.cn/#/zh-CN/component/pagination -->
    <div class="block" style="float:right;margin-top:15px;" v-if="LogsViewModel.total>0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="LogsViewModel.page"
        :page-sizes="[10, 20, 30, 40,100]"
        :page-size="LogsViewModel.pageSize"
        @prev-click="lastPage"
        @next-click="nextPage"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="LogsViewModel.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getLogsList } from "@/api/logs";
import { deepClone } from "@/utils";
const defaultUser = {
  ID: '',
  LogLevel: '',
  LogPriority: '',
  LogDate: '',
  AspnetMVCController: '',
  AspnetMVCAction: '',
  AspnetRequestHost: '',
  AspnetRequestMethod: '',
  AspnetRequestIP: '',
  AspnetRequestQueryString: '',
  AspnetRequestUserAgent: '',
  AspnetRequestUrl: '',
  AspnetUserIdentity: '',
  Message: '',
  ExceptionMessage: '',
  ExceptionStackTrace: '',
  InnerException: '',
  AppUser: '',
  Machinename: '',
  MachineUser: '',
  CreateTime: ''
};
export default {
  filters: {
    typeFilter(type) {
      const typeMap = {
        "": "全部",
        Debug: "调试",
        Info: "输出",
        Warn: "警告",
        Error: "错误",
        Fatal: "严重错误"
      };
      return typeMap[type];
    }
  },
  data() {
    return {
      typeOptions: ["全部","Debug", "Info", "Warn", "Error", "Fatal"],
      LogsViewModel: {
        page: 1,
        pageSize: 10,
        total: 0,
        LogLevel: '',
        LoginName: '',
        LogMessage: '',
        StartTime: '',
        EndTime: '',
        OrderBy: "CreateTime", //排序字段
        IsAsc: "true" //是否升序
      },
      dialogVisible: false,
      dialogType: '',
      user: Object.assign({}, defaultUser),
      logsList: [],
      loading: true
    };
  },

  computed: {
    // 计算属性，只要相关联的值没有改变，直接返回，不再进行计算，与方法区别，缓存
  },
  created() {
    // 实例创建完成后执行的代码
    this.getLogsList(this.LogsViewModel);
  },
  methods: {
    async getLogsList(LogsViewModel) {
      const res = await getLogsList(LogsViewModel);
      if (res.data) {
        this.LogsViewModel.total = res.data.TotalCount;
      }
      this.logsList = res.data.LogsItems;
      this.loading = false;
    },

    queryUser() {
      this.getLogsList(this.LogsViewModel);
    },
    refreshUser() {
      this.LogsViewModel.LoginName = '';
      this.LogsViewModel.LogLevel = '';
      this.LogsViewModel.LogMessage = '';
      (this.LogsViewModel.StartTime = ''),
        (this.LogsViewModel.EndTime = ''),
        (this.LogsViewModel.page = 1);
      this.getLogsList(this.LogsViewModel);
    },
    sortChange(data) {
      const { prop, order } = data;
      this.LogsViewModel.OrderBy = prop;
      if (prop == null || prop == '') this.LogsViewModel.OrderBy = "CreateTime";
      if (order === "ascending") {
        this.LogsViewModel.IsAsc = true;
      } else {
        this.LogsViewModel.IsAsc = false;
      }
      this.queryUser();
    },
    lastPage(val) {
      this.LogsViewModel.page = val;
    },
    nextPage(val) {
      this.LogsViewModel.page = val;
    },
    handleSizeChange(val) {
      this.LogsViewModel.pageSize = val;
      this.getLogsList(this.LogsViewModel);
    },
    handleCurrentChange(val) {
      this.LogsViewModel.page = val;
      this.getLogsList(this.LogsViewModel);
    }
  }
};
</script>
